<template>
  <div class="containerComments">
    <!-- 分割线 -->
    <van-divider>正文结束</van-divider>
    <van-cell title="全部评论"> </van-cell>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- 单个评论项 -->
      <van-cell v-for="(comment, index) in list" :key="index" class="item">
        <div slot="title">
          <div class="authName">
            <span>{{ comment.aut_name }}</span>
            <van-icon
              :name="comment.is_liking ? 'good-job' : 'good-job-o'"
              style="font-size: 18px"
              :color="comment.is_liking ? 'red' : '#777'"
              @click="commentLike(comment)"
              >{{ comment.like_count }}</van-icon
            >
          </div>
          <!-- 评论内容 -->
          <div class="comCon">
            {{ comment.content }}
          </div>
        </div>
        <!-- 评论头像 -->
        <van-image
          slot="icon"
          width="36"
          height="36"
          round
          fit="cover"
          :src="comment.aut_photo"
        />
        <div slot="label" class="labelCon">
          <span>{{ comment.pubdate | dateTime }}</span>
          <van-button size="mini" round class="resBtn"
            >{{ comment.reply_count }}回复</van-button
          >
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
export default {
  name: 'ArticleComments',
  data () {
    return {
      total: 0,
      list: [],
      loading: false,
      finished: false,
      type: 'a',
      offset: null,
      limit: 10
    }
  },
  props: {
    articleId: {
      type: [String, Object, Number],
      required: true
    }
  },
  methods: {
    async onLoad () {
      const { data: res } = await this.$https.get('/app/v1_0/comments', {
        params: {
          type: this.type,
          source: this.articleId,
          offset: this.offset,
          limit: this.limit
        }
      })
      this.list.push(...res.data.results)
      console.log(res, '??')
      this.loading = false
      // 改变参数
      this.offset = res.data.last_id
      // 当没有评论或者评论完毕
      if (res.data.total_count === 0 || res.data.results.length === 0) {
        this.finished = true
      }
    },
    // 点赞处理
    commentLike (commment) {
      if (commment.is_liking) {
        commment.is_liking = false
        commment.like_count -= 1
      } else {
        commment.is_liking = true
        commment.like_count += 1
      }
    },
    // 添加评论
    addCom (com) {
      this.list.unshift(com)
    }
  },
  mounted () {
    this.$bus.$on('addCom', this.addCom)
  }
}
</script>

<style scoped lang="less">
.containerComments {
  .item {
    justify-content: space-between;
    .van-cell__value {
      flex: unset;
    }
  }
  .van-cell {
    padding-left: 0;
    padding-right: 0;
  }
  .van-image {
    margin-right: 8px;
    margin-top: 5px;
  }
  .authName {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    color: #406599;
    font-size: 14px;
    margin-bottom: 5px;
  }
  .comCon {
    color: #222;
    font-size: 16px;
  }

  .labelCon {
    display: flex;
    width: 70%;
    align-items: center;
    justify-content: space-between;
    .resBtn {
      height: 20px;
    }
  }
}
</style>
